<template>
  <base-button v-bind="$attrs" :debounce="300" @click="dialogVisible = true">
    <slot>
      <span>新增</span>
    </slot>
  </base-button>
  <el-dialog v-model="dialogVisible" draggable destroy-on-close append-to-body v-bind="$attrs">
    <template #title>
      <h6>{{ title }}</h6>
    </template>
    <slot />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="handleConfirm">Confirm</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
// TODO 在封装form后再完成其主要功能
// 新增按钮
// 功能 弹窗中展示新增的form 保存按钮和取消按钮
// 需要 formData 和 新增/编辑的API接口
// 思考 编辑有可能是文字 我这里需要怎么处理
interface IProps {
  title?: string
}
const props = defineProps<IProps>()
const obj = reactive({
  dialogVisible: false,
})
const emits = defineEmits(['confirm'])
const handleConfirm = () => {
  emits('confirm', () => {
    obj.dialogVisible = false
  })
}
let { dialogVisible } = toRefs(obj)
</script>

<style scoped></style>
